<!--组件组-->
<script setup lang="ts">
import {computed, reactive,} from "vue";

const emit = defineEmits<{
  //定义一个回调方法，可以理解为回调父组件传入的attribute为ccc的方法，入参为一个number类型的变量
  (e: 'ccc', parentName:number,upRout:boolean): void,
}>()
const clickHandler = (index: number) => {
  emit('ccc',index,true);

};

const dynamicWidth = computed(() => {
  return  `${(props.width??-550)/buttons.length}0px`;
  // return containerWidth.value ? `calc(${containerWidth.value}px - 550px) / ${buttons.length}` : 'auto';
});

const props = defineProps(['buttons','width'])
// 将传入的 props.buttons 转换为一个响应式 ref
const buttons = reactive([...props.buttons]);
</script>

<template>
  <div class="mainStyle">
    <div
        v-for="(elment, index) in buttons"
        class="buttonStyle"
        :class="{
        'unButtonStyle': !elment.selected && index !== 0 && index !== buttons.length - 1,
        'selectedStyle':elment.selected,
        'class_one_btn_style': index === 0 && !elment.selected,
        'class_last_btn_style': index === buttons.length - 1 && !elment.selected,
      }"
        :key="elment.label"
        @click="clickHandler(index)"
    >
      <div class="lienStyle" v-show="elment.selected"></div>
      <div class="contentStyle" :class="{'selectedContentStyle': elment.selected}" :style="{ width: dynamicWidth }">
        {{ elment.label }}
      </div>
      <div class="lienStyle" v-show="elment.selected"></div>
      <div v-if="index < buttons.length - 1 && !elment.selected" class="separator"></div>
    </div>
  </div>
</template>


<style scoped>
.class_one_btn_style {
  border: 1px solid #EEF8FE !important;;
  border-radius: 6px 0 0 6px;
  border-left: 2px solid red;
  border-top: 2px solid #EEF8FE;
  border-bottom: 2px solid #EEF8FE;
  border-right: transparent;
}

.class_last_btn_style {
  border: 1px solid #EEF8FE !important;;
  border-radius: 0 6px 6px 0;
  border-right: 2px solid #EEF8FE;
  border-top: 2px solid #EEF8FE;
  border-bottom: 2px solid #EEF8FE;
  border-left: transparent;
}

.mainStyle {
  display: flex;
  flex-direction: row;
  background-color: #FFFFFF;
  height: 43px;
}

.lienStyle {
  height: 20px;
  width: 2px;
  background-color: #3C8DF9;
  border-radius: 6px;
}
.selectedStyle{
  border-radius: 6px;
}

.contentStyle {
  padding-bottom: 10px;
  padding-top: 10px;
  font-size: 14px;
}

.selectedContentStyle {
  background-color: #EEF8FE;
  color: #3C8DF9;
}

.buttonStyle:hover{
  background-color: #EEF8FE;
}

.buttonStyle {
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px solid #3C8DF9;
  cursor: pointer; /* 鼠标悬停时显示为小手图标 */
}

.separator {
  width: 1px;
  background-color: #EEF8FE;
  height: 20px;
  margin: 10px 0; /* 设置上下空隙 */
}

.unButtonStyle {
  border-top: 2px solid #EEF8FE;
  border-bottom: 2px solid #EEF8FE;
  border-right: transparent;
  border-left: transparent;
}
</style>
